<template>
	<view>
		<!-- 顶部自定义导航开始 -->
		<!-- <view class="tn-navbg" :style="{height: vuex_custom_bar_height + 'px'}"> -->
		<!-- 顶部自定义导航 -->
		<!-- 	<tn-nav-bar fixed alpha customBack>
				<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
					<text class='icon tn-icon-left'></text>
					<text class='icon tn-icon-home-capsule-fill'></text>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
					<text class="tn-text-bold tn-text-xl tn-color-black">试题列表</text>
				</view>
			</tn-nav-bar>
		</view> -->
		<!-- 顶部自定义导航结束 -->
		<view :style="{paddingTop: 0 + 'px'}">
			<liu-slide-questions :dataList="list" @submit="subData" :popstate="popstate" :time="time"></liu-slide-questions>
		</view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		getCollectionExamList,
		submitExamCollection,
		getSubmitHistory
	} from "@/utils/api/exam.js"
	export default {
		mixins: [template_page_mixin],
		data() {
			return {
				list: [], //问题列表数据
				optionSelectConfig: ["A", "B", "C", "D", "E", "F", "G", "H"],
				searchWhere: {
					uid: ""
				},
				historySearchWhere: {
					collection_uid: "",
					submit_uid: "",
				},
				popstate: false,
				time: '',
				timeId: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
			}
		},
		onLoad(params) {
			this.searchWhere.uid = params.uid
			this.historySearchWhere.collection_uid = params.uid
			this.historySearchWhere.submit_uid = params.submit_uid || ""
			if (this.historySearchWhere.submit_uid !== "") {
				this.popstate = true
			}
			this.$t.mpShare = {
				share: false,
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
		},
		onShow() {
			if (this.historySearchWhere.submit_uid === "") {
				this.getOptionList()
				this.submitTime()
			} else {
				this.getSubmitHistory()
			}
		},
		methods: {
			// 计算时间
			submitTime() {
				let _that = this
				_that.timeId = setInterval(function() {
					_that.seconds++;
					if (_that.seconds == 60) {
						_that.minutes++;
						_that.seconds = 0;
					}
					if (_that.minutes == 60) {
						_that.hours++;
						_that.minutes = 0;
					}
					_that.time = _that.formatTime(_that.hours) + ':' + _that.formatTime(_that.minutes) + ':' + _that
						.formatTime(_that.seconds);
				}, 1000)
			},
			formatTime(time) {
				if (time < 10) {
					return '0' + time;
				}
				return time.toString();
			},
			// 获取答题历史记录
			getSubmitHistory() {
				getSubmitHistory(this.historySearchWhere).then(res => {
					if (res.code == 100) {
						let optionArrayList = res.data.option
						for (let i = 0; i < optionArrayList.length; i++) { // 赋值选择试题
							let option = []
							let dbOption = JSON.parse(optionArrayList[i].option)
							for (let j = 0; j < dbOption.length; j++) { // 选择题选项
								option.push({
									alias: this.getSelectBg(j),
									answer: dbOption[j].title,
									isSelect: this.selectState(optionArrayList[i].user_answer, this.getSelectBg(j)) ? 1 : 0 ,//这个是用来回显的字段(0:未选中；1:选中)(可不传)
								})
							}
							this.list.push({
								id: optionArrayList[i].uid,
								title: optionArrayList[i].title,
								score: optionArrayList[i].score,
								secondTitle: optionArrayList[i].second_title,
								problemType: (optionArrayList[i].option_type == 1 ? 'SINGLE' : "MULTY"),
								children: option,
								optionAnswer: optionArrayList[i].option_answer,
								userAnswer: optionArrayList[i].user_answer,
								analysis: optionArrayList[i].analysis,
								originProblemType: "option",
								isCorrect: optionArrayList[i].is_correct,
							})
						}
						let judeArrayList = res.data.jude
						for (let i = 0; i < judeArrayList.length; i++) { // 判断试题
							let option = []
							// for (let j = 0; j < judeArrayList[i].option.length; j++) { // 处理选项
							option.push({
								alias: this.getSelectBg(0),
								answer: judeArrayList[i].option1,
								isSelect: this.selectState(judeArrayList[i].user_answer, this.getSelectBg(0)) ? 1 : 0,
							})
							option.push({
								alias: this.getSelectBg(1),
								answer: judeArrayList[i].option2,
								isSelect: this.selectState(judeArrayList[i].user_answer, this.getSelectBg(1)) ? 1 : 0, 
							})
							// }
							this.list.push({
								id: judeArrayList[i].uid,
								title: judeArrayList[i].title,
								score: judeArrayList[i].score,
								secondTitle: "",
								problemType: "SINGLE",
								originProblemType: "jude",
								children: option,
								optionAnswer: judeArrayList[i].option_answer,
								userAnswer: judeArrayList[i].user_answer,
								analysis: judeArrayList[i].analysis,
								isCorrect: judeArrayList[i].is_correct,
							})
							console.log(this.list)
						}
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			// 获取选择试题
			getOptionList() {
				getCollectionExamList(this.searchWhere).then(res => {
					if (res.code == 100) {
						let optionArrayList = res.data.option
						for (let i = 0; i < optionArrayList.length; i++) { // 赋值选择试题
							let option = []
							let dbOption = JSON.parse(optionArrayList[i].option)
							for (let j = 0; j < dbOption.length; j++) { // 选择题选项
								option.push({
									alias: this.getSelectBg(j),
									answer: dbOption[j].title,
									isSelect: 0 //这个是用来回显的字段(0:未选中；1:选中)(可不传)
								})
							}
							this.list.push({
								id: optionArrayList[i].uid,
								title: optionArrayList[i].title,
								score: optionArrayList[i].score,
								secondTitle: optionArrayList[i].second_title,
								problemType: (optionArrayList[i].option_type == 1 ? 'SINGLE' : "MULTY"),
								children: option,
								originProblemType: "option",
							})
						}
						let judeArrayList = res.data.jude
						for (let i = 0; i < judeArrayList.length; i++) { // 判断试题
							let option = []
							// for (let j = 0; j < judeArrayList[i].option.length; j++) { // 处理选项
							option.push({
								alias: this.getSelectBg(0),
								answer: judeArrayList[i].option1,
								isSelect: 0 //这个是用来回显的字段(0:未选中；1:选中)(可不传)
							})
							option.push({
								alias: this.getSelectBg(1),
								answer: judeArrayList[i].option2,
								isSelect: 0 //这个是用来回显的字段(0:未选中；1:选中)(可不传)
							})
							// }
							this.list.push({
								id: judeArrayList[i].uid,
								title: judeArrayList[i].title,
								score: judeArrayList[i].score,
								secondTitle: "",
								problemType: "SINGLE",
								originProblemType: "jude",
								children: option
							})
						}
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			//点击提交
			subData(data) {
				uni.showLoading({
					title: "答题努力计算中",
					mask: true,
				})
				clearInterval(this.timeId)
				let userAnswerArray = []
				for (let i = 0; i < data.length; i++) {
					let answerOption = []
					if (data[i].problemType == "MULTY") { // 多选题
						for (let j = 0; j < data[i].userAnswer.length; j++) {
							answerOption.push({
								answer: data[i].userAnswer[j].alias
							})
						}
					} else if (data[i].problemType == "SINGLE") { // 单选题
						answerOption.push({
							answer: data[i].userAnswer.alias
						})
					}
					userAnswerArray.push({
						uid: data[i].id,
						problem_type: data[i].problemType,
						answer: answerOption,
						origin_type: data[i].originProblemType
					})
				}
				console.log(JSON.stringify(userAnswerArray))
				let submitCollection = {
					time: this.time,
					collection_uid: this.searchWhere.uid,
					record: JSON.stringify(userAnswerArray),
				}
				console.log(submitCollection)
				// 提交试卷
				submitExamCollection(submitCollection).then(res => {
					if (res.code == 100) {
						uni.hideLoading()
						this.$func.tnRelunch("/subpages/exam/reading/submit_result?submit_uid=" + res.data.submit_uid + "&collection_uid=" + this.searchWhere.uid)
					} else {
						this.$func.showToast(res.msg)
					}
				})
			},
			// 处理试题选项是否选中状态
			selectState(optionAnswer, userAnswer) {
				let optionAnswerArray = optionAnswer.split(",")
				return optionAnswerArray.includes(userAnswer)
			},
			getSelectBg(optionIndex) {
				return this.optionSelectConfig[optionIndex]
			},
		},
		onUnload() {
			clearInterval(this.timeId)
		}
	}
</script>

<style scoped lang="scss">
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 胶囊结束*/
</style>